<template>
	<div>
		<el-carousel :interval="interval" :autoplay="isAutoplay" indicator-position="none" :height="height + 'px'"
			:style="`width: ${width}px;`" style="border-radius: 10px;">
			<el-carousel-item v-if="video && video.poster">
				<video v-if="video && video.url" :src="video.url" class="crpr video" objectFit="contain"
					style="width: 100%; height: 100%;" :show-center-play-btn="false" :controls="false"
					@click="playVideo(video.url)"></video>
				<div class="pos_a crpr iconfont iconbofang" @click="playVideo(video.url)"></div>
			</el-carousel-item>
			<el-carousel-item v-if="imgs && imgs.length > 0" class="dflex_c" v-for="(item, i) in imgs" :key="i">
				<image @click="openViewer(i, 'imgs')" :src="item.url || item" class="crpr w100"
					style="object-fit: contain;" mode="widthFix"></image>
			</el-carousel-item>
			<el-carousel-item v-if="imgs && imgs.length <= 0" class="dflex_c">
				<image @click="openViewer(img, 'img')" :src="img" class="crpr w100" style="object-fit: contain;"
					mode="widthFix"></image>
			</el-carousel-item>
			<el-image-viewer :zIndex="3000" v-if="showViewer" :on-close="closeViewer" :url-list="previewImgs" />
		</el-carousel>
		<el-dialog class="video_dialog" width="70%" :visible.sync="videoDialog" :append-to-body="true"
			@open="dialogOpen" @opened="dialogOpened" @closed="dialogClosed" v-dialogDrag>
			<video-player v-if="isVideo" class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
				:options="playerOptions"></video-player>
		</el-dialog>
	</div>
</template>

<script>
	import '@/common/video.css';
	import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
	export default {
		components: {
			ElImageViewer
		},
		props: {
			interval: {
				type: Number,
				default: 3000
			},
			width: {
				type: Number,
				default: 100
			},
			height: {
				type: Number,
				default: 100
			},
			video: {
				type: [Object, Array],
				default: () => {}
			},
			imgs: {
				type: Array,
				default: () => []
			},
			img: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				isAutoplay: true,
				showViewer: false,
				previewImgs: [],
				videoDialog: false,
				isVideo: false,
				playerOptions: {
					playbackRates: [0.5, 1.0, 2.0, 3.0], //可选择的播放速度
					autoplay: false, //如果true,浏览器准备好时开始播放。
					muted: false, // 默认情况下将会消除任何音频。
					loop: false, // 视频一结束就重新开始。
					preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{
						type: '',
						src: '' //url地址
					}],
					poster: '', //你的封面地址
					notSupportedMessage: '此视频暂无法播放', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
					controlBar: {
						timeDivider: true, //当前时间和持续时间的分隔符
						durationDisplay: true, //显示持续时间
						remainingTimeDisplay: false, //是否显示剩余时间功能
						fullscreenToggle: true //全屏按钮
					}
				}
			};
		},
		methods: {
			playVideo(url) {
				this.isAutoplay = false;
				this.isVideo = true;
				this.playerOptions.sources[0].type = 'video/mp4';
				this.playerOptions.sources[0].src = url;
				this.videoDialog = true;
			},
			dialogOpen() {
				if (this.$refs.videoPlayer) {
					this.$refs.videoPlayer.$el.children[0].children[0].currentTime = 0;
				}
			},
			dialogOpened() {
				this.$refs.videoPlayer.player.play();
			},
			dialogClosed() {
				this.$refs.videoPlayer.player.pause();
				this.isAutoplay = true;
				this.isVideo = false;
			},
			openViewer(res, type) {
				this.isAutoplay = false;
				this.showViewer = true;

				if (type == 'imgs') {
					const arr1 = this.imgs.slice(res, this.imgs.length);
					const arr2 = this.imgs.slice(0, res);
					this.previewImgs = [...arr1.map(x => x.url || x), ...arr2.map(x => x.url || x)];
				} else {
					this.previewImgs = [res];
				}
			},
			closeViewer() {
				this.showViewer = false;
				this.isAutoplay = true;
			}
		}
	};
</script>

<style>
	>>>.el-carousel__arrow {
		width: 16px;
		height: 16px;
		background-color: #ff6a6c;
		z-index: 3;
	}

	>>>.el-carousel__arrow:hover {
		background-color: rgba(255, 106, 108, 0.8);
	}

	>>>.el-carousel__arrow--left {
		left: 4px;
	}

	>>>.el-carousel__arrow--right {
		right: 4px;
	}

	.iconbofang {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 22px;
		height: 22px;
		line-height: 22px;
		font-size: 22px;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		border-radius: 50%;
		transition: all 0.2s;
	}

	.iconbofang:hover {
		background-color: rgba(0, 0, 0, 0.3);
	}

	.video>>>.uni-video-slots {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.video_dialog>>>.el-dialog {
		border-radius: 10px;
		overflow: hidden;
	}

	.video_dialog>>>.el-dialog__header {
		padding: 16px;
	}

	.video_dialog>>>.el-dialog__headerbtn {
		top: 8px;
		right: 16px;
	}

	.video_dialog>>>.el-dialog__body {
		padding: 0;
	}
</style>
